{{ title 'Settings' }}

<div class="crates-heading">
  {{svg-jar "gear"}}
  <h1>Account Settings</h1>
</div>

<div id='me-profile'>
  <h2>Profile Information</h2>

  <div class='info'>
    <UserLink @user={{this.model.user}}> <UserAvatar @user={{this.model.user}} @size="medium" /> </UserLink>

    <dl>
      <dt>Name</dt>
      <dd>{{ this.model.user.name }}</dd>
      <dt>GitHub Account</dt>
      <dd>{{ this.model.user.login }}</dd>
    </dl>
  </div>
</div>

<div id='me-email'>
  <h2>User Email</h2>
  <EmailInput @type="email" @value={{this.model.user.email}} @user={{this.model.user}} />
</div>

<form id='me-email-notifications' {{ action 'saveEmailNotifications' on='submit' }} >
  <h2>Email Notification Preferences</h2>

  <p>
    To aid detection of unauthorized crate changes, we email you each time a new version of a crate you own is pushed.
    By receiving and reading these emails, you help protect the Rust ecosystem. You may also choose to turn these
    emails off for any of your crates listed below.
  </p>

  <div class='row'>
    <div class='button-container'>
      <button type='button' class='yellow-button small' {{action 'emailNotificationsSelectAll'}}>Select All</button>
    </div>
    <div class='button-container'>
      <button type='button' class='yellow-button small' {{action 'emailNotificationsSelectNone'}}>Deselect All</button>
    </div>
  </div>

  <div class='row'>
    <ul>
      {{#each this.ownedCrates as |ownedCrate|}}
        <OwnedCrateRow @ownedCrate={{ownedCrate}} />
      {{/each}}
    </ul>
  </div>

  <div class='row'>
    {{#if this.emailNotificationsError}}
      <div class='error'>
        An error occurred while saving your email preferences.
      </div>
    {{/if}}
    {{#if this.emailNotificationsSuccess}}
      <div class='success'>
        Your email notification preferences have been updated!
      </div>
    {{/if}}
    <div class='right'>
      <button type='submit' class='yellow-button'>Update</button>
    </div>
  </div>
</form>

<div local-class="me-subheading">
  <h2>API Access</h2>
  <div local-class="right">
    <button
      type="button"
      class='yellow-button'
      disabled={{this.disableCreate}}
      data-test-new-token-button
      {{action "startNewToken"}}
    >
      New Token
    </button>
  </div>
</div>

<p>
  If you want to use package commands from the command line, you will need to
  login with <code>cargo login (token)</code> using one of the tokens listed below.
</p>
<p>
  When working in shared environments, supplying the token on the command line could
  expose it to prying eyes. To avoid this, enter <code>cargo login</code> and supply your
  token when prompted.
</p>

<div local-class="token-list">
  {{#each this.sortedTokens as |api_token|}}
    <ApiTokenRow @api_token={{api_token}} />
  {{/each}}
</div>
